<template>
  <div v-if="routeName === 'Menu'" class="list-page">
    <div class="tool-btns">
      <el-button
        type="primary"
        size="small"
        @click="$router.push({ name: 'AddMenu' })"
        >新增菜单/操作</el-button
      >
    </div>
    <div class="block-wrap filter-form">
      <el-form :inline="true" :model="form" size="small" label-width="140px">
        <el-form-item label="菜单/操作名称">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item class="filter-form-btns">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="default" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="block-wrap">
      <el-table
        :data="dataList"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        style="width: 100%;"
        v-loading="loading"
      >
        <el-table-column prop="name" label="名称"> </el-table-column>
        <!-- 0 菜单 1操作 -->
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            {{ getType(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="authority" label="权限ID" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="url" label="链接" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        layout="total, prev, pager, next, sizes, jumper"
        :total="1000"
      /> -->
    </div>
  </div>
  <router-view v-else :key="key" />
</template>

<script>
import { getMenuList, deleteMenu } from "@/api/sys";
export default {
  name: "Menu",
  computed: {
    key() {
      return this.$route.path;
    },
    routeName() {
      return this.$route.name;
    }
  },
  data() {
    return {
      form: {
        type: "",
        name: ""
      },
      dataList: [],
      loading: false
    };
  },
  mounted() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      this.loading = true;
      getMenuList()
        .then(res => {
          this.dataList = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getType(type) {
      switch (type) {
        case "0":
          return "菜单";
        case "1":
          return "操作";
      }
    },
    // 删除
    handleDelete(row) {
      this.$confirm("此操作将删除该菜单, 是否继续", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          deleteMenu(row.id).then(res => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getMenuList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        name: "AddMenu",
        query: { menuId: row.id }
      });
    },
    search() {
      if (!this.form.name) {
        this.getMenuList();
      } else {
        this.dataList = this.mapTree(this.form.name, this.dataList);
      }
    },
    //树形结构筛选
    mapTree(value, arr) {
      let newarr = [];
      arr.forEach(element => {
        if (element.name.indexOf(value) > -1) {
          // 判断条件
          newarr.push(element);
        } else {
          if (element.children && element.children.length > 0) {
            let redata = this.mapTree(value, element.children);
            if (redata && redata.length > 0) {
              let obj = {
                ...element,
                children: redata
              };
              newarr.push(obj);
            }
          }
        }
      });
      return newarr;
    },
    resetForm() {
      this.form.name = "";
      this.getMenuList();
    }
  }
};
</script>

<style lang="scss">
@import "~@/styles/page/list-page.scss";
.block-wrap {
  padding: 25px;
  background: #fff;
  border-radius: 2px;
  margin-bottom: 16px;
}
.el-form--inline .el-form-item {
  margin-right: 60px;
}
::v-deep.list-page .filter-form .filter-form-btns {
  margin-right: 10px;
}
</style>
